<template>
    <h1> app vue3 学习</h1>

    <ul>
        <li>vue</li>
        <li>react</li>
        <li> node </li>
    </ul>

    <div class="container">
        <p>X 轴：{{ x }} Y 轴：{{ y }}</p>
        <hr />
        <div>
            <p id="pBox">{{ count }}</p>
            <button @click="add()">自增</button>
        </div>
    </div>

    <hr>
    <div id="divBox"> {{ msg }} </div>
    <button @click="change">修改数据</button>


    <hr>
    <div> 学习vue3 响应式对象</div>
    <p> {{ obj.name }}---{{ obj.age }} </p>

    <button @click="changeObj">修改对象数据</button>


    <hr>



</template>

<script>
import { ref, onMounted, reactive } from 'vue'
function useMouseMove () {
    // 定义数据
    const x = ref(0);  // 对象
    const y = ref(0);
    // 定义方法
    const move = (e) => {
        x.value = e.clientX;
        y.value = e.clientY
    }
    onMounted(() => {
        document.addEventListener('mousemove', move)

    })

    return {
        x,
        y,
    }
}

function useCount () {
    // let count = 10; // 定义普通数据 
    // vue2 或者vue3 给你的相关方法的或者指令
    const count = ref(10)  // 定义响应式数据  proxy 代理  对象
    const add = () => {
        console.log(count);
        count.value++

    }

    return {
        count,
        add
    }

}

function useMsg () {
    let msg = 'hello vue3'

    const change = () => {
        msg = '你好'
        document.getElementById('divBox').innerHTML = msg
    }
    return {
        msg,
        change
    }

}

function useObj () {

    // 定义一个 普通对象 obj={name:'zs',age:19}
    //    定义一个响应式对象 reactive
    //   reactive 一般定义为复杂数据类型  
    //   ref  可以定义任何数据类型  一般定义简单数据类型
    const obj = reactive({ name: 'zs', age: 19 })

    const changeObj = () => {

        obj.name = '老王'
    }






    return {
        obj,
        changeObj
    }


}

export default {

    setup () {

        const { x, y } = useMouseMove()
        const { count, add } = useCount()
        const { msg, change } = useMsg()
        const { obj, changeObj } = useObj()

        return {
            x,
            y,
            count,
            msg,
            add,
            change,
            obj,
            changeObj,
        }
    }
}

</script>





